import React from "react";
import axios from 'axios'

class FilmItem extends React.Component{
    render(){
        let {poster,name,filmId,synopsis,category}=this.props
        let imgStyle={
            float:'left',
            width:'120px'
        }
        return(
            <div>
                {
                    <div style={{overflow:'hidden',marginBottom:'10px'}} key={filmId} onClick={()=>{
                        center.publish(synopsis)
                    }}>
                        <img src={poster} style={{...imgStyle}} alt={name}/>
                        <div>
                            <h3>{name}</h3>
                            <span>类型：{category}</span>
                        </div>
                    </div>    
                }
            </div>
        )
    }
} 

class FilmDetail extends React.Component{
    constructor(){
        super()
        this.state={
            info:''
        }
        center.subscribe((info)=>{
            this.setState({info})
        })
    }
    render(){
        let boxStyle={
            position:'fixed',
            background:'yellow',
            width:'300px',
            top:'50px',
            right:'50px',
            padding:'20px'
        }
        return(
            <div style={boxStyle}>
                {this.state.info}
            </div>
        )
    }
} 

export default class App extends React.Component{
    constructor(){
        super()
        this.state={
            filmList:[],
        }
        axios.get('/07test.json').then(res=>this.setState({filmList:res.data}))
    }
    render(){
        return(
            <div>
                {
                    this.state.filmList.map(item=>
                        <FilmItem {...item}/>
                    )
                }
                <FilmDetail/>
            </div>
        )
    }
}

let center={
    subscribers:[],
    subscribe(callback){
        this.subscribers.push(callback)
    },
    publish(value){
        this.subscribers.forEach(callback=>callback(value))
    }
}
